<template>
	<view class="">
		<web-view :src="url"></web-view>
		<view class="btncens" v-if="!shows && allshow">
			<u-button type="primary" @click="addxieyis">签署协议</u-button>
		</view>
		<view class="aposditims" v-if="shows && allshow">
			<jushi-signature :settings="settings" base64 @change="signatureChange"></jushi-signature>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				shows: false,
				allshow:false,
				filePath: "",
				fileName: "",
				url: '',
				viewerUrl: '/static/pdf/web/viewer.html', //用来渲染PDF的html
				fileUrl: '/static/pdf/web/compressed.tracemonkey-pldi-09.pdf',
				settings: { //签名设置
					width: '750', //签名区域的宽
					height: '700', //签名区域的高
					lineWidth: 2, //签名时线宽
					textColor: '#007AFF' //签名文字颜色
				},
				imgUrl: ''
			}
		},

		onLoad(options) {
			if (!options.filePath) {
				let fileuri =  uni.$func.cache("userInfo").signFilePath;
				this.url = this.viewerUrl + '?file=' + encodeURIComponent(fileuri);
				this.allshow = true;
			} else {
				
				this.url = this.viewerUrl + '?file=' + encodeURIComponent(options.filePath);
			}
		},
		onShow() {},
		onReachBottom() {},
		methods: {
			addxieyis() {
				this.shows = !this.shows
			},
			signatureChange(e) {
				if(e){
					let arr = e.split('base64,')
					let parms = {
						base64Image: arr[1],
					};
					uni.$api.common.saveProtoApi(parms).then((res) => {
						if (res.result.success) {
							uni.showToast({
								title: "协议签署成功！",
								icon: 'none'
							})
							this.allshow = false;
							uni.switchTab({
								url: "../index/indexlist"
							})
							
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					});
				}
				this.imgUrl = e
			}

		}
	}
</script>

<style lang="scss" scoped>
	.btncens {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		// height: 150rpx;
		z-index: 9999;
		margin: 14rpx;
		border-radius: 10rpx;
	}

	.aposditims {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		// height: 200rpx;
		z-index: 9999;
	}

	.preview {
		margin: 10rpx;
		border: 1rpx solid #aaaaaa;
		border-radius: 10rpx;
	}

	.text {
		margin: 20rpx;
		color: #aaaaaa;
	}
</style>